<template>
	<view class="reservation-success">
		<view class="success-icon">
			<image src='../../static/navi/success.png' alt="预约成功" mode="aspectFit"
				style="width: 110px;   height: 110px;"></image>
			<text style="font-weight: bolder;margin-top: 20px;margin-block-end: 20px;">预约成功</text>
			<view class="saoma">
				<navigator url="/pages/ScanQR/ScanQR">
					<image class="qr-code-button" src="../../static/navi/QR.png" @click="previewQRCode" alt="QR Code"></image>
					<text class="ruyuan">扫码入园</text>
					<BR></BR>
					<text class="ruyuanText"> scan the QR code to enter the park</text>
				</navigator>
			</view>
		</view>
		<view class="reservation-info">
			<text class="title" style="font-size: 17px; font-weight: bold;">预约信息</text>
			<view class="all">
			<view class="info-item">
				<text>姓名：</text>
				<text>{{ userInfo.membername }}</text>
			</view> <br>
			<view class="info-item">
				<text>证件类型：</text>
				<text>{{ userInfo.memberidType }}</text>
			</view><br>
			<view class="info-item">
				<text>证件号码：</text>
				<text>{{ userInfo.memberidNumber }}</text>
			</view><br>
			<view class="info-item">
				<text>手机号码：</text>
				<text>{{ userInfo.memberphoneNumber }}</text>
			</view><br>
			<view class="info-item">
				<text>团队名称：</text>
				<text>{{ userInfo.teamName }}</text>
			</view> <br>
			<view class="info-item">
				<text>团队人数：</text>
				<text>{{ userInfo.totalPeople }} </text>
			</view>
			</view>
		</view>
		<view class="a12">
		<button class="btn" @click="toindex" style=" background-color:#8DCB6D;">返回主页</button>
		<button class="btn" @click="cancelReservation" style=" background-color:#8DCB6D;">取消预约</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					idType: '',
					idNumber: '',
					phoneNumber: '',
					teamName: '',
					teamPerson: '',
					userInfoType: ''
				}
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'groupData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},
		
		methods: {
			cancelReservation() {
					uni.showModal({
						title: '提示',
						content: '确定要取消预约吗？',
						success: (res) => {
							if (res.confirm) {
								console.log('预约已取消');
								uni.removeStorage({
									key: 'groupData',
									success: (res) => {
										uni.showToast({
										  title: '预约已取消',
										  icon: 'success',
										  duration: 2000
										});	
										// 跳转到主页
										setTimeout(() => {
										  uni.switchTab({
										    url: '/pages/index/index'
										  });
										}, 1000)
									}
								})
			
			
							}
						}
					});
				},
				toindex(){
					uni.switchTab({
						url: '/pages/index/index'
					});
				},
			},
		previewQRCode() {
			uni.previewImage({
				urls: ['/static/QR.png'],
				current: 0, 
				success: function() {
				}
			});
		}
	};
</script>

<style>
	.reservation-success {
		padding: 20px;
		background-color: #f3f5f9;
	}

	.success-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.success-icon text {
		margin: 5px 0;
	}

	.reservation-info {
		font-size: 15px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-weight: bolder;
	}

	.qr-code-button {
		width: 90rpx;
		height: 80rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		cursor: pointer;
		vertical-align: middle;
		float: left;
	}
	.saoma{
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		width: 670rpx;
		height: 140rpx;
	}
	.all{
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		margin-top: 10px;
	}
	.a12{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.btn{
		width: 45%;
		border: none; 
		padding: 5px;
	}
	.ruyuan{
		font-weight: bolder;
		margin-top: 100rpx;
		vertical-align: middle;
		float: left;
	}
	.ruyuanText{
		vertical-align: middle;
		float: left;
	}
</style>